<template>
  <ex-dialog width="900px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <div class="main" v-loading="loading">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="" label-width="0" prop="prizeIdList">
          <div class="inpBox">
            <el-select v-model="ruleForm.prizeIdList" multiple  placeholder="请选择" @change="changePrizeList" @remove-tag="removePrizeList">
              <el-option
                v-for="itema in initPrizeList"
                :key="itema.id"
                :label="itema.name"
                :value="itema.id">
              </el-option>
            </el-select>
            <el-button type="primary"  @click="submitForm('ruleForm')" style="margin-left: 14px">确认选择</el-button>
          </div>   
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="投放数量:" label-width="100px" prop="amount"> 
              <el-input type="number" v-model="ruleForm.amount" placeholder="请输入">
                <template slot="append">个</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="实际抽取比例" prop="realityRatio"> 
              <el-input type="number" v-model="ruleForm.realityRatio" placeholder="请输入">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="140px" label="显示抽取比例:" prop="showRatio"> 
              <el-input type="number" v-model="ruleForm.showRatio" placeholder="请输入">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table v-loading="loading" :data="prizeList" stripe border>
      <el-table-column label="序号" type="index" width="55" align="center" fixed />
      <el-table-column label="类型" align="center" prop="name" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-if="scope.row.type == 1">实物奖品</div>
          <div v-if="scope.row.type == 2">数字权益卡</div>
          <div v-if="scope.row.type == 3">权益库存</div>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="button_box">
      <el-button type="primary"  @click="sava()">确认添加</el-button>
      <el-button type="primary"  @click="handleCancel('ruleForm')">取消</el-button>
    </div>
  </ex-dialog>
</template>
<script>
  // components
  import Loading from "@/components/Loading/index";
  // api
  import {
    prizeSelectList,
  } from '@/api/blindBox'

  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
    },
    data() {
      var checkRealityRatio= (rule, value, callback) => { 
        let regNumber = /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
        if (value === '') {
          callback(new Error('请填写'));
        }else if (regNumber.test(value) == false) {
          return callback(new Error('请填写正数'));
        }else {
          return callback()
        }
      };
      var checkShowRatio= (rule, value, callback) => { 
        let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
        if (value === '') {
          callback(new Error('请填写'));
        }else if (regNumber.test(value) == false || value == '0.00' || value == '0.0') {
          return callback(new Error('请填写大于0且最多保留两位小数的数值'));
        }else {
          return callback()
        }
      };
      return {
        title:'添加盲盒奖品',
        loading: false,
        prizeSelectList: [],
        initPrizeList: [],
        prizeList: [],
        
        ruleForm: {
          prizeIdList: [],
          type: '',
          name: '',
          prizeId: '',//奖品
          amount: '', //投放数量
          realityRatio:"",//实际抽取比例 
          showRatio: '',//显示抽取比例
        },
        rules: {
          prizeIdList: [
            {  required: true, message: "请选择奖品", trigger: "change"}
          ],
          amount: [
            {  required: true, message: "请输入", trigger: "blur" }
          ],
          realityRatio: [
            {  required: true,validator: checkRealityRatio,trigger: ['change','blur']}
          ],
          showRatio: [
            {  required: true,validator: checkShowRatio,trigger: ['change','blur'] }
          ],
        },
      };
    },
    computed: {},
    created() {
      this.getprizeSelectList()
    },
    methods: {
      // 获取奖品下拉
      getprizeSelectList(){
        prizeSelectList().then(res => {
          this.prizeSelectList = res.result
          this.initPrizeList = [...res.result]
        }).finally(() => {
          
        })
      },
      focusPrizeList(e){
        console.log('e',e)
        this.eventPrizeId = e
        this.initPrize()
      },
       // 初始化奖品下拉列表
      initPrize(){
        this.initPrizeList = [...this.prizeSelectList]
        this.initPrizeList = [...this.initPrizeList].filter(x => [...this.ruleForm.prizeList].every(y => y.prizeId !== x.id));
      },
      //选择盲盒奖品-
      changePrizeList(e){
        this.prizeSelectList.forEach(item => {
          if(item.id == e){
            this.ruleForm.type = item.type
            this.ruleForm.name = item.name
          }
        })
       
      },
      // 删除tag
      removePrizeList(e){
        console.log('e',e)
        this.prizeList.forEach((item,index) => {
          if(item.prizeId == e){
            this.prizeList.splice(index,1)
          }
        })
        this.initPrizeList = [...this.prizeSelectList]
        this.initPrizeList =this.initPrizeList.filter(x => this.prizeList.every(y => y.prizeId !== x.id));
      },
       /* 删除奖品 */
      handleDelete(row,index){
        // this.initPrize()
        console.log('index',index)
        console.log('this.prizeList',this.prizeList)
        this.prizeList.splice(index,1)
        this.ruleForm.prizeIdList.splice(index,1)
        this.initPrizeList = [...this.prizeSelectList]
        this.initPrizeList =this.initPrizeList.filter(x => this.prizeList.every(y => y.prizeId !== x.id));
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      handleCancel(){
        this.handleClose()
      },
      submitForm(formName) {
        //创建确定
        this.$refs[formName].validate((valid) => {
          
          if (valid) {
            //   alert("submit!");editGroupon
            console.log('1111',this.ruleForm.prizeIdList)
            
            var goods = []
            this.ruleForm.prizeIdList.forEach(aitem => {
              this.prizeSelectList.forEach(item => {
                var obj = {}
                if(aitem == item.id){
                  obj.type = item.type
                  obj.name = item.name
                  obj.prizeId = item.id
                  obj.amount = this.ruleForm.amount
                  obj.realityRatio = this.ruleForm.realityRatio
                  obj.showRatio = this.ruleForm.showRatio
                  goods.push(obj)
                }
              })
            })
            this.prizeList = goods
            console.log('22222',this.prizeList)
            this.initPrizeList = [...this.prizeSelectList]
            this.initPrizeList =this.initPrizeList.filter(x => this.prizeList.every(y => y.prizeId !== x.id));

            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      //确认添加
      sava(){
        this.$emit('success',this.prizeList)
        this.handleClose()
      },
      
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }

  .main {
    padding: 20px 20px;
  }

  .from_box {
    display: flex;
    margin-bottom: 20px;
  }

  .from_box_l {
    width: 110px;
    color: #606266;
    font-size: 14px;
    font-weight: bold;
  }

  .from_box_r {
    color: #333;
    font-size: 15px;
    flex: 1;
  }

  .el_table_box {
    padding: 0 20px 40px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .el_table_box_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 14px;
  }

  .el_table_box_h_title {
    border-left: 4px solid #ff9300;
    padding-left: 4px;
  }

  .carousel_box {
    width: 400px;
    margin-bottom: 20px;
  }

  .swiper_img {
    width: 100%;
    height: 100%;
  }

  .carousel_box_two {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .phone_box {
    width: 100px;
    height: 100px;
    margin: 0 10px 10px 0;
  }

  .button_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
  .el-select{
    width: 80%;
  }
</style>
